<template lang="pug">
  div
    h1 SHOP
    div
      router-link(:to="{name:'HelloWorld'}") HelloWorld
    div
      h1 NikeName:{{userInfo.nickname}}
      img(v-bind:src="userInfo.headimgurl" width="100" height="100")
    div
    ul
      li appId:{{appId}}
      li openid:{{openid}}
      li 网络类型：{{networkType}}
    button(v-on:click="getLocation") 获取地理位置
    br
    br
    br
    br
    button(v-on:click="chooseImage") 拍照或从手机相册中选图
    div
      div(v-for="item in localIds")
        img(v-bind:src="item" width="100" height="100")
        div
          button.btn(v-on:click="previewImage(item)") 预览
          button.btn(v-on:click="uploadImage(item)") 上传
</template>

<script type="text/ecmascript-6">
  import wx from 'weixin-js-sdk'

  export default {
    data() {
      return {
        appId: '',
        openid: '',
        userInfo: {},
        networkType: '',
        localIds: []
      }
    },
    mounted() {
      this.getUserInfo()
      this.getWxConfig()
    },
    methods: {
      getWxConfig() {
        let datetime = (new Date()).getTime()
        let url = 'http://syangserver.ngrok.xiaomiqiu.cn/getWxConfig'
        this.$http.get(
          url,
          {
            params: {
              url: location.href,
              nonceStr: datetime
            }
          }
        ).then(res => {
          console.log('WxConfig res:', res.data)
          let data = res.data
          this.appId = data.appId
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: datetime,
            signature: data.signature,
            jsApiList: [
              'onMenuShareAppMessage',
              'onMenuShareTimeline',
              'openLocation',
              'getLocation',
              'getNetworkType',
              'chooseImage',
              'previewImage',
              'uploadImage'
            ]
          })
          wx.ready(() => {
            /**
             * 分享给朋友
             */
            wx.onMenuShareAppMessage({
              title: 'WeCharShop', // 分享标题
              desc: '微信商场', // 分享描述
              link: 'http://www.baidu.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://e.hiphotos.baidu.com/image/pic/item/b151f8198618367a2e8a46ee23738bd4b31ce586.jpg', // 分享图标
              type: 'link', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: () => {
                // 用户确认分享后执行的回调函数
                console.log('用户确认分享后执行的回调函数')
                alert('用户确认分享后执行的回调函数')
              },
              cancel: () => {
                // 用户取消分享后执行的回调函数
                console.log('用户取消分享后执行的回调函数')
                alert('用户取消分享后执行的回调函数')
              }
            })

            /**
             * 分享到朋友圈
             */
            wx.onMenuShareTimeline({
              title: '分享标题', // 分享标题
              link: 'http://www.baidu.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://e.hiphotos.baidu.com/image/pic/item/b151f8198618367a2e8a46ee23738bd4b31ce586.jpg', // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
                console.log('用户确认分享朋友圈后执行的回调函数')
                alert('用户确认分享朋友圈后执行的回调函数')
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
                console.log('用户取消分享朋友圈后执行的回调函数')
                alert('用户取消分享朋友圈后执行的回调函数')
              }
            })

            /**
             * 获取网络状态接口
             */
            wx.getNetworkType({
              success: (res) => {
                this.networkType = res.networkType // 返回网络类型2g，3g，4g，wifi
              }
            })
          })
          wx.error((res) => {
            console.log('CONFIG ERROR:', res)
          })
        })
      },
      getUserInfo() {
        this.openid = this.$route.params.openid
        this.$http
          .get(
            'http://syangserver.ngrok.xiaomiqiu.cn/getUserInfo',
            {
              params: {
                openId: this.openid
              }
            }
          )
          .then((res) => {
            if (res.data.length > 0) {
              this.userInfo = JSON.parse(res.data[0].info)
            }
          })
      },
      getLocation() {
        this.userLocation = {}
        wx.getLocation({
          type: 'wgs84',
          success: (res) => {
            this.userLocation.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
            this.userLocation.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
            this.userLocation.speed = res.speed // 速度，以米/每秒计
            this.userLocation.accuracy = res.accuracy // 位置精度
            // 使用微信内置地图查看位置接口
            wx.openLocation({
              latitude: res.latitude, // 纬度，浮点数，范围为90 ~ -90
              longitude: res.longitude, // 经度，浮点数，范围为180 ~ -180。
              name: '我的位置', // 位置名
              address: '地址详情说明', // 地址详情说明
              scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
              infoUrl: 'http://www.gongjuji.net' // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
            })
            console.log('getLocation:', res)
          }
        })
      },
      chooseImage() {
        wx.chooseImage({
          count: 3, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: (res) => {
            this.localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log('chooseImage', res)
          }
        })
      },
      previewImage(_current) {
        let _urls = this.localIds
        wx.previewImage({
          current: _current,
          urls: _urls
        })
      },
      uploadImage(_current) {
        wx.uploadImage({
          localId: _current, // 需要上传的图片的本地ID，由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: (res) => {
            // var serverId = res.serverId; // 返回图片的服务器端ID
            console.log('uploadImage res:', res)
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .btn
    padding 4px 12px
    & + .btn
      margin-left 15px
</style>
